<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
			<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;font-size: 30rpx;">{{queryParam.orderNumber || ''}}</view>
						<view style="color: #999999;font-size: 22rpx;">{{queryParam.orderDate || ''}}</view>
			</view>
			<view class="" slot="body">
				<u-row gutter="16">
					<u-col span="12">
						<view class="apply-text"><span>客户名称：</span>{{ queryParam.customerName || '' }}</view>
						<view class="apply-text"><span>地址：</span>{{queryParam.address || ''}}</view>
						<view class="apply-text"><span>业主电话：</span>{{queryParam.phone || ''}}</view>
						<view class="apply-text"><span>安装时间：</span>{{queryParam.installerDate || ''}}</view>
						<view class="apply-text"><span>完成时间：</span>{{queryParam.installDate || ''}}</view>
						<view class="apply-text"><span>备注：</span>{{queryParam.newRemark || ''}}</view>
					</u-col>
				</u-row>
				<view class="apply-text"><span>上传安装照片：</span></view>
				<!-- <u-upload
					:fileList="fileList"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="9"
					:previewFullImage="true"
				></u-upload> -->
				
				<u-upload ref="upload_file" :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
					@on-choose-complete="onChooseComplete" @on-remove="removeSuccess" name="1" multiple :maxCount="9" :auto-upload="false"
					@on-success="uploadSuccess"
					:previewFullImage="true"></u-upload>
			</view>
		</u-card>
		<u-row gutter="32" class="bottom-box" justify="center" v-if="queryParam.installerStatus != 2">
			<u-col span="12">
				<view><u-button type="primary" shape="circle" @click="submit()">确定</u-button></view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				queryParam: {},
				list:[{},{}],
				fileList: [],
				text: null,
				current:1,
				saleOrderAttaches:[]
			}
		},
		onLoad(options) {
			this.queryParam = options
		},
		methods: {
			
				submit() {
					let that = this;
					uni.showModal({
						title: '提示',
						content: `确认${this.current == 0 ? '接受' :'完成'}此安装任务？`,
						success: (res)=>{
							if (res.confirm) {
								let param ={
									installerStatus: 2 ,
									id:this.queryParam.installerId,
									attachList:this.saleOrderAttaches
								}
								this.$u.api.updateInstallStatus(param).then(res=>{
									if(res.code == 200){
										this.$u.toast('操作成功！')
										setTimeout(()=>{
											let pages = getCurrentPages();
											let prevPage = pages[pages.length - 2]; //上一个页面
											prevPage.$vm.change(this.current + 1)
											uni.navigateBack()
										},1500) 
									}
								})
							}
						}
					});
				},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			
			removeSuccess(list,index){
				// 组件删除成功后，需要处理接收的数组
				this.saleOrderAttaches.splice(index,1)
			},
			uploadSuccess(data, index, lists, name){
				console.log('list :>> ', list);
			},
			onChooseComplete(lists, name) {
				console.log('lists :>> ', lists);
				const app = this;
				const config = this.vuex_config;
				const upload = (list,index)=>{
					uni.uploadFile({
					url: config.baseUrl + '/common/upload',
					filePath: list[index].url,
					name: 'file',
					header: {
						"Authorization":'Bearer ' + this.vuex_token
					},
					//	这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
					success: (res) => {
						let result = JSON.parse(res.data)
						if (result.code == 200) {
							this.$u.toast('上传成功');
							this.saleOrderAttaches.push({
								orderId:this.queryParam.id,
								attachPath:result.url,
								// attachType:1
							})
							this.$refs.upload_file.lists[index].progress = 100
						} else {
							this.$u.toast(result.msg);
						}
					},
				})
				}
				lists.forEach((val,index)=>{
					if(val.progress == 0){
						upload(lists,index)
					}
				})
			},
			
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			
			// 删除图片
			deletePic(event) {
			
				console.log('this[`fileList${event.name}`] :>> ', this[`fileList${event.name}`]);
				throw new Error('123')
				// this[`fileList${event.name}`].splice(event.index, 1)
			},
	
		}
		
	}
</script>

<style lang="scss" scoped>
@import 'index.scss';
page {
	background-color: #f5f5f5;
}
.wrap .search{
	background: #ffffff;
}
.apply-text{
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.user-images{
	width: 28px;
	height:28px;
	margin-right: 8px;
}
.apply-list-foot{
	font-size: 28rpx;
}
.personnel-list{
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	.personnel-user{
		position: relative;
		margin: 5px 9px 0;
	}
	.user-images{
		width: 48px;
		height:48px;
		margin-right:0;
		
	}
	.iconfont{
		position: absolute;
		top:-12px;
		right:-5px;
		color: #FE0100;
	}
}
</style>